.cherry {
  --shortcut-key-config-panel-bg: var(--dropdown-bg);
  --shortcut-key-config-panel-text-color: var(--dropdown-item-color);

  // 快捷键面板通用样式变量
  --shortcut-panel-padding-x: 15px;
  --shortcut-panel-padding-y: 10px;
  --shortcut-panel-font-size-xs: var(--font-size-xs);
  --shortcut-panel-border-radius: 4px;
  --shortcut-panel-transition: all 0.2s;

  .cherry-shortcut-key-config-panel-wrapper {
    background-color: var(--shortcut-key-config-panel-bg);
    color: var(--shortcut-key-config-panel-text-color);
    width: 300px !important;
    height: 518px !important;

    @mixin flex-center {
      display: flex;
      align-items: center;
    }

    @mixin hover-color {
      &:hover {
        color: var(--primary-color);
      }
    }

    @mixin panel-text {
      font-size: var(--shortcut-panel-font-size-xs);
      user-select: none;
      color: var(--shortcut-key-config-panel-text-color);
    }

    .cherry-shortcut-key-config-panel-inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .shortcut-tabs {
        display: flex;
        padding: 4px var(--shortcut-panel-padding-x);
        gap: 10px;
        margin-bottom: 6px;

        .shortcut-tab {
          flex: 1;
          padding: 6px 0 4px;
          border-radius: var(--shortcut-panel-border-radius);
          text-align: center;
          cursor: pointer;
          font-size: 12px;
          transition: var(--shortcut-panel-transition);
          user-select: none;
          background-color: var(--dropdown-item-hover-bg);

          &:hover {
            background-color: var(--dropdown-item-hover-bg);
            color: var(--dropdown-item-hover-color);
          }

          &.active {
            color: var(--primary-color);
            background-color: var(--secondary-color);
          }
        }
      }

      .shortcut-panels {
        flex: 1;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .shortcut-panel {
          display: none;

          &.active {
            display: block;
          }
        }
      }

      .cherry-shortcut-key-config-panel-ul {
        list-style: none;
        padding: 0;
        margin: 0;
        user-select: none;

        .cherry-dropdown-item,
        .shortcut-key-item {
          @include flex-center;
          height: auto;
          padding: 2px var(--shortcut-panel-padding-x);
          position: relative;
          color: var(--shortcut-key-config-panel-text-color);
          justify-content: flex-start;

          &.editing {
            background-color: var(--dropdown-item-hover-bg);

            .shortcut-key-config-panel-kbd {
              border: 1px dashed var(--primary-color);
              border-radius: var(--shortcut-panel-border-radius);
              padding: 2px 4px;
              background: var(--secondary-color);
              transform: translateX(0) !important;
            }

            .edit-btn {
              display: none;
            }

            .edit-actions {
              @include flex-center;
            }
          }

          .shortcut-key-config-panel-name {
            max-width: 120px;
          }

          .shortcut-key-right,
          .shortcut-key-right-static {
            @include flex-center;
            flex-wrap: wrap;
            flex: 1;
            justify-content: flex-end;
            position: relative;
            flex-direction: row;
          }

          .edit-btn {
            position: static;
            opacity: 0;
            visibility: hidden;
            transition: var(--shortcut-panel-transition);
            cursor: pointer;
            padding: 2px 4px;
            border-radius: var(--shortcut-panel-border-radius);
            color: var(--dropdown-item-hover-color);
            @include hover-color;
          }

          .shortcut-key-config-panel-kbd {
            @include flex-center;
            gap: 2px;
            justify-content: right;

            .keyboard-key {
              @include flex-center;
              justify-content: center;
              background-color: var(--shortcut-key-config-panel-bg);
              color: var(--shortcut-key-config-panel-text-color);
              border: 1px solid #ccc;
              border-bottom: 2px solid #b5b5b5;
              border-radius: 6px;
              font-size: 13px;
              margin: 0 2px;
              padding: 3px 5px;
              line-height: 16px;
              min-width: 16px;
              text-align: center;
            }

            .shortcut-split {
              color: var(--oc-gray-6);
            }
          }

          .edit-actions {
            margin-right: 4px;
            display: none;
            gap: 4px;

            .action-btn {
              padding: 4px 6px 0;
              border-radius: var(--shortcut-panel-border-radius);
              cursor: pointer;
              transition: var(--shortcut-panel-transition);
              font-size: 12px;
              text-align: center;

              .ch-icon {
                margin-right: 0;
              }

              &.save {
                color: var(--color-success);

                &:hover {
                  background: var(--oc-lime-0);
                }
              }

              &.cancel {
                color: var(--color-error);

                &:hover {
                  background: var(--oc-red-2);
                }
              }
            }
          }

          &:hover {
            color: var(--dropdown-item-hover-color);

            .edit-btn {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }

    .shortcut-panel-tips {
      @include panel-text;
      text-align: center;
      padding: 8px var(--shortcut-panel-padding-x) 4px;
    }

    .shortcut-panel-settings {
      padding: var(--shortcut-panel-padding-y) var(--shortcut-panel-padding-x);
      @include panel-text;
      cursor: pointer;
      justify-content: space-between;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      box-shadow: var(--accordion-shadow);
      margin-bottom: 5px;

      .shortcut-settings-btn {
        height: auto;
        line-height: 1.2em;
        text-wrap: nowrap;
        @include hover-color;
      }

      .j-shortcut-settings-disable-btn:hover {
        color: var(--color-error);
      }
    }

    &.disable {
      .cherry-shortcut-key-config-panel-ul {
        opacity: 0.3;

        .cherry-dropdown-item,
        .shortcut-key-item {
          cursor: default; // 设置默认鼠标指针
          pointer-events: none; // 禁用所有鼠标事件

          &:hover {
            color: inherit; // 禁用hover时的文字颜色变化
            background-color: transparent; // 禁用hover时的背景色变化

            .shortcut-key-config-panel-kbd {
              transform: translateX(0);
            }

            .edit-btn {
              opacity: 0;
              visibility: hidden; // 禁用状态下不显示编辑按钮
            }
          }
        }
      }

      .j-shortcut-settings-disable-btn {
        color: var(--color-error);
      }
    }
  }
}
